<template>
  <div class="container">
    <!-- 添加内容 -->
    <el-form
      :model="editInfo"
      :rules="addRules"
      label-width="100px"
      ref="addFrom"
      class="demo-ruleForm"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input
          v-model="editInfo.subjectName"
          placeholder="请输入学科名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch
          v-model="editInfo.isFrontDisplay"
          active-color="#13ce66"
          :active-value="1"
          :incative-value="0"
        ></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { detail, add, update, simple } from '@/api/hmmm/subjects'

export default {
  name: 'addSubject',
  props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      //   编辑数据
      editInfo: {
        subjectName: '',
        isFrontDisplay: ''
      },
      //   添加规则
      addRules: {
        subjectName: {
          required: true,
          message: '请输入学科名称',
          trigger: 'blur'
        }
      },
      //   所有数据
      allList: [],
      //   当前学科名称
      subjectName: ''
    }
  },
  created() {
    this.listAll()
    if (this.id) {
      this.getsubjectName()
    }
  },
  methods: {
    //   加载所有列表
    async listAll() {
      try {
        const { data } = await simple()
        this.allList = data
      } catch (error) {
        this.$message.error('获取失败')
      }
    },

    //  根据id获取学科
    async getsubjectName() {
      try {
        const { data } = await detail({
          id: this.id
        })
        this.editInfo = data
        this.subjectName = data.subjectName
      } catch (err) {
        this.$message.error('获取失败')
      }
    },

    // 确认提交
    btnclick() {
      this.editInfo.subjectName = this.editInfo.subjectName.trim()
      //  1、 预验证
      this.$refs.addFrom.validate(async valid => {
        if (!valid) return
        ///2、判断添加、编辑
        if (!this.id) {
          ///3、添加
          // 相同学科名不能添加
          const bool = this.allList.some(item => {
            return item.label === this.editInfo.subjectName
          })
          if (bool) {
            return this.$message('不能重复添加相同学科')
          }
          try {
            await add(this.editInfo)
            this.$message.success('添加成功')
            this.$emit('close')
          } catch (err) {
            this.$message.error('添加失败')
          }
        } else {
          // 4、编辑
          // 编辑框先过滤自己，返回一个新的数组
          const arr = this.allList.filter(item => {
            return item.label !== this.subjectName
          })
          // 遍历返回布尔值
          const bool = arr.some(item => {
            return item.label === this.editInfo.subjectName
          })
          if (bool) {
            return this.$message('学科名称已存在')
          }
          // 修改数据
          try {
            await update({
              id: this.id,
              subjectName: this.editInfo.subjectName,
              isFrontDisplay: this.editInfo.isFrontDisplay
            })
            this.$message.success('修改成功')
            this.$emit('close')
          } catch (err) {
            this.$message.error('修改失败')
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
